
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg>
                    <div class="name">微博</div>
                    <div class="fontclass">#icon-weibo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-loading"></use>
                    </svg>
                    <div class="name">loading</div>
                    <div class="fontclass">#icon-loading</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuaxin"></use>
                    </svg>
                    <div class="name">刷新</div>
                    <div class="fontclass">#icon-shuaxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuangkou"></use>
                    </svg>
                    <div class="name">窗口</div>
                    <div class="fontclass">#icon-chuangkou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <div class="name">微信</div>
                    <div class="fontclass">#icon-weixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengque"></use>
                    </svg>
                    <div class="name">正确</div>
                    <div class="fontclass">#icon-zhengque</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yinshenim"></use>
                    </svg>
                    <div class="name">隐身-im</div>
                    <div class="fontclass">#icon-yinshenim</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-remind"></use>
                    </svg>
                    <div class="name">remind</div>
                    <div class="fontclass">#icon-remind</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-search"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-search</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin1"></use>
                    </svg>
                    <div class="name">微信</div>
                    <div class="fontclass">#icon-weixin1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biaoqing"></use>
                    </svg>
                    <div class="name">表情</div>
                    <div class="fontclass">#icon-biaoqing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg>
                    <div class="name">qq</div>
                    <div class="fontclass">#icon-qq</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yuejuancuohao"></use>
                    </svg>
                    <div class="name">阅卷错号</div>
                    <div class="fontclass">#icon-yuejuancuohao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quanxianguanli"></use>
                    </svg>
                    <div class="name">权限管理</div>
                    <div class="fontclass">#icon-quanxianguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconziti17"></use>
                    </svg>
                    <div class="name">分享</div>
                    <div class="fontclass">#icon-iconziti17</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-1"></use>
                    </svg>
                    <div class="name">上传到云端</div>
                    <div class="fontclass">#icon-1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yuandian"></use>
                    </svg>
                    <div class="name">圆点</div>
                    <div class="fontclass">#icon-yuandian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kefu"></use>
                    </svg>
                    <div class="name">客服</div>
                    <div class="fontclass">#icon-kefu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon31"></use>
                    </svg>
                    <div class="name">正确</div>
                    <div class="fontclass">#icon-icon31</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tubiao"></use>
                    </svg>
                    <div class="name">图表</div>
                    <div class="fontclass">#icon-tubiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-msnui-tel"></use>
                    </svg>
                    <div class="name">手机</div>
                    <div class="fontclass">#icon-msnui-tel</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-On-line"></use>
                    </svg>
                    <div class="name">在线</div>
                    <div class="fontclass">#icon-On-line</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gou"></use>
                    </svg>
                    <div class="name">勾</div>
                    <div class="fontclass">#icon-gou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-shezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi1"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-shezhi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchuxian"></use>
                    </svg>
                    <div class="name">删除线</div>
                    <div class="fontclass">#icon-shanchuxian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-browser"></use>
                    </svg>
                    <div class="name">browser</div>
                    <div class="fontclass">#icon-browser</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-file"></use>
                    </svg>
                    <div class="name">file</div>
                    <div class="fontclass">#icon-file</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-like"></use>
                    </svg>
                    <div class="name">like</div>
                    <div class="fontclass">#icon-like</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-phone"></use>
                    </svg>
                    <div class="name">phone</div>
                    <div class="fontclass">#icon-phone</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-work"></use>
                    </svg>
                    <div class="name">工作台</div>
                    <div class="fontclass">#icon-work</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon5"></use>
                    </svg>
                    <div class="name">icon_树</div>
                    <div class="fontclass">#icon-icon5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfont38"></use>
                    </svg>
                    <div class="name">向上</div>
                    <div class="fontclass">#icon-iconfont38</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wangzhi"></use>
                    </svg>
                    <div class="name">网址</div>
                    <div class="fontclass">#icon-wangzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongju"></use>
                    </svg>
                    <div class="name">工具</div>
                    <div class="fontclass">#icon-gongju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-denglu"></use>
                    </svg>
                    <div class="name">登录</div>
                    <div class="fontclass">#icon-denglu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xialine"></use>
                    </svg>
                    <div class="name">下_line</div>
                    <div class="fontclass">#icon-xialine</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-box"></use>
                    </svg>
                    <div class="name">box</div>
                    <div class="fontclass">#icon-box</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-star"></use>
                    </svg>
                    <div class="name">star</div>
                    <div class="fontclass">#icon-star</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-similarproduct"></use>
                    </svg>
                    <div class="name">similar-product</div>
                    <div class="fontclass">#icon-similarproduct</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huanfu"></use>
                    </svg>
                    <div class="name">换肤</div>
                    <div class="fontclass">#icon-huanfu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjia"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#icon-tianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-04"></use>
                    </svg>
                    <div class="name">微博</div>
                    <div class="fontclass">#icon-04</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yaoyaozhibofanye"></use>
                    </svg>
                    <div class="name">么么直播－翻页</div>
                    <div class="fontclass">#icon-yaoyaozhibofanye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right"></use>
                    </svg>
                    <div class="name">右</div>
                    <div class="fontclass">#icon-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-left"></use>
                    </svg>
                    <div class="name">左</div>
                    <div class="fontclass">#icon-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zixunlist"></use>
                    </svg>
                    <div class="name">list</div>
                    <div class="fontclass">#icon-zixunlist</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lunbozutu"></use>
                    </svg>
                    <div class="name">轮播组图</div>
                    <div class="fontclass">#icon-lunbozutu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daima1"></use>
                    </svg>
                    <div class="name">代码1</div>
                    <div class="fontclass">#icon-daima1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sanjiao"></use>
                    </svg>
                    <div class="name">三角</div>
                    <div class="fontclass">#icon-sanjiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinshui"></use>
                    </svg>
                    <div class="name">进水</div>
                    <div class="fontclass">#icon-jinshui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-speech3"></use>
                    </svg>
                    <div class="name">对话</div>
                    <div class="fontclass">#icon-speech3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-file1"></use>
                    </svg>
                    <div class="name">文件</div>
                    <div class="fontclass">#icon-file1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-skip"></use>
                    </svg>
                    <div class="name">skip</div>
                    <div class="fontclass">#icon-skip</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lianjie"></use>
                    </svg>
                    <div class="name">链接</div>
                    <div class="fontclass">#icon-lianjie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-haoyouqingqiu"></use>
                    </svg>
                    <div class="name">好友请求</div>
                    <div class="fontclass">#icon-haoyouqingqiu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-false-circle"></use>
                    </svg>
                    <div class="name">错</div>
                    <div class="fontclass">#icon-false-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-help"></use>
                    </svg>
                    <div class="name">help</div>
                    <div class="fontclass">#icon-help</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-html"></use>
                    </svg>
                    <div class="name">html</div>
                    <div class="fontclass">#icon-html</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengfangxing"></use>
                    </svg>
                    <div class="name">正方形</div>
                    <div class="fontclass">#icon-zhengfangxing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sheweimoban"></use>
                    </svg>
                    <div class="name">设为模板</div>
                    <div class="fontclass">#icon-sheweimoban</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhifeiji"></use>
                    </svg>
                    <div class="name">纸飞机</div>
                    <div class="fontclass">#icon-zhifeiji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenjianxiazai"></use>
                    </svg>
                    <div class="name">文件下载</div>
                    <div class="fontclass">#icon-wenjianxiazai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tupian"></use>
                    </svg>
                    <div class="name">图片</div>
                    <div class="fontclass">#icon-tupian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-404"></use>
                    </svg>
                    <div class="name">404</div>
                    <div class="fontclass">#icon-404</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-up"></use>
                    </svg>
                    <div class="name">上</div>
                    <div class="fontclass">#icon-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jilu"></use>
                    </svg>
                    <div class="name">记录</div>
                    <div class="fontclass">#icon-jilu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconset0142"></use>
                    </svg>
                    <div class="name">关于</div>
                    <div class="fontclass">#icon-iconset0142</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rili"></use>
                    </svg>
                    <div class="name">日历</div>
                    <div class="fontclass">#icon-rili</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unlink"></use>
                    </svg>
                    <div class="name">unlink</div>
                    <div class="fontclass">#icon-unlink</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right1"></use>
                    </svg>
                    <div class="name">三角</div>
                    <div class="fontclass">#icon-right1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongwangip"></use>
                    </svg>
                    <div class="name">公网IP</div>
                    <div class="fontclass">#icon-gongwangip</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianjiwenzi"></use>
                    </svg>
                    <div class="name">编辑_文字</div>
                    <div class="fontclass">#icon-bianjiwenzi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baibaoxiang"></use>
                    </svg>
                    <div class="name">百宝箱</div>
                    <div class="fontclass">#icon-baibaoxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xitongguanli"></use>
                    </svg>
                    <div class="name">系统管理</div>
                    <div class="fontclass">#icon-xitongguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-danxuankuanghouxuan"></use>
                    </svg>
                    <div class="name">单选框-候选</div>
                    <div class="fontclass">#icon-danxuankuanghouxuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-danxuankuangxuanzhong"></use>
                    </svg>
                    <div class="name">单选框-选中</div>
                    <div class="fontclass">#icon-danxuankuangxuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-juzhongduiqi"></use>
                    </svg>
                    <div class="name">居中对齐</div>
                    <div class="fontclass">#icon-juzhongduiqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youduiqi"></use>
                    </svg>
                    <div class="name">右对齐</div>
                    <div class="fontclass">#icon-youduiqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuoduiqi"></use>
                    </svg>
                    <div class="name">左对齐</div>
                    <div class="fontclass">#icon-zuoduiqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exl"></use>
                    </svg>
                    <div class="name">exl</div>
                    <div class="fontclass">#icon-exl</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pdf"></use>
                    </svg>
                    <div class="name">pdf</div>
                    <div class="fontclass">#icon-pdf</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zip"></use>
                    </svg>
                    <div class="name">zip</div>
                    <div class="fontclass">#icon-zip</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-saoyisao"></use>
                    </svg>
                    <div class="name">扫一扫</div>
                    <div class="fontclass">#icon-saoyisao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodedingdan"></use>
                    </svg>
                    <div class="name">我的订单</div>
                    <div class="fontclass">#icon-wodedingdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sucaiku"></use>
                    </svg>
                    <div class="name">素材库</div>
                    <div class="fontclass">#icon-sucaiku</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiazai"></use>
                    </svg>
                    <div class="name">下载</div>
                    <div class="fontclass">#icon-xiazai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon05"></use>
                    </svg>
                    <div class="name">返回顶部</div>
                    <div class="fontclass">#icon-icon05</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-richang"></use>
                    </svg>
                    <div class="name">日常</div>
                    <div class="fontclass">#icon-richang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenjian"></use>
                    </svg>
                    <div class="name">文件</div>
                    <div class="fontclass">#icon-wenjian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hexinrencai"></use>
                    </svg>
                    <div class="name">核心人才</div>
                    <div class="fontclass">#icon-hexinrencai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gonggao"></use>
                    </svg>
                    <div class="name">公告</div>
                    <div class="fontclass">#icon-gonggao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biaodan"></use>
                    </svg>
                    <div class="name">表单</div>
                    <div class="fontclass">#icon-biaodan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiacu"></use>
                    </svg>
                    <div class="name">加粗</div>
                    <div class="fontclass">#icon-jiacu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gou1"></use>
                    </svg>
                    <div class="name">勾</div>
                    <div class="fontclass">#icon-gou1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liaotianduihuaimgoutong"></use>
                    </svg>
                    <div class="name">聊天 对话 IM 沟通</div>
                    <div class="fontclass">#icon-liaotianduihuaimgoutong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tongji"></use>
                    </svg>
                    <div class="name">统计</div>
                    <div class="fontclass">#icon-tongji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fangxinggouxuankuang"></use>
                    </svg>
                    <div class="name">方形勾选框</div>
                    <div class="fontclass">#icon-fangxinggouxuankuang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sub-process-copy"></use>
                    </svg>
                    <div class="name">子流程</div>
                    <div class="fontclass">#icon-sub-process-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-table-copy"></use>
                    </svg>
                    <div class="name">表格</div>
                    <div class="fontclass">#icon-table-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duihua"></use>
                    </svg>
                    <div class="name">对话</div>
                    <div class="fontclass">#icon-duihua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baojiayinqing"></use>
                    </svg>
                    <div class="name">报价引擎</div>
                    <div class="fontclass">#icon-baojiayinqing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baobiao"></use>
                    </svg>
                    <div class="name">报表</div>
                    <div class="fontclass">#icon-baobiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodehaoyou"></use>
                    </svg>
                    <div class="name">我的好友</div>
                    <div class="fontclass">#icon-wodehaoyou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kehu"></use>
                    </svg>
                    <div class="name">客户</div>
                    <div class="fontclass">#icon-kehu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-peixun"></use>
                    </svg>
                    <div class="name">培训</div>
                    <div class="fontclass">#icon-peixun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-genzongicon"></use>
                    </svg>
                    <div class="name">跟踪icon</div>
                    <div class="fontclass">#icon-genzongicon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanlijiaose"></use>
                    </svg>
                    <div class="name">管理角色</div>
                    <div class="fontclass">#icon-guanlijiaose</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon02"></use>
                    </svg>
                    <div class="name">新闻</div>
                    <div class="fontclass">#icon-icon02</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi3"></use>
                    </svg>
                    <div class="name">消息盒子</div>
                    <div class="fontclass">#icon-xiaoxi3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tupian1"></use>
                    </svg>
                    <div class="name">图片</div>
                    <div class="fontclass">#icon-tupian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-organization"></use>
                    </svg>
                    <div class="name">组织</div>
                    <div class="fontclass">#icon-organization</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qqqun"></use>
                    </svg>
                    <div class="name">QQ群</div>
                    <div class="fontclass">#icon-qqqun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-down-copy"></use>
                    </svg>
                    <div class="name">三角</div>
                    <div class="fontclass">#icon-down-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-emwdaima"></use>
                    </svg>
                    <div class="name">emw_代码</div>
                    <div class="fontclass">#icon-emwdaima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-111"></use>
                    </svg>
                    <div class="name">narrow</div>
                    <div class="fontclass">#icon-111</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjia1"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#icon-tianjia1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon"></use>
                    </svg>
                    <div class="name">报表</div>
                    <div class="fontclass">#icon-icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuzhi"></use>
                    </svg>
                    <div class="name">组织</div>
                    <div class="fontclass">#icon-zuzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiahuaxian"></use>
                    </svg>
                    <div class="name">下划线</div>
                    <div class="fontclass">#icon-xiahuaxian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baobiao1"></use>
                    </svg>
                    <div class="name">报表</div>
                    <div class="fontclass">#icon-baobiao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinxiangtianchong"></use>
                    </svg>
                    <div class="name">信箱 </div>
                    <div class="fontclass">#icon-xinxiangtianchong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xietiim"></use>
                    </svg>
                    <div class="name">斜体-im</div>
                    <div class="fontclass">#icon-xietiim</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biaoqing1"></use>
                    </svg>
                    <div class="name">表情</div>
                    <div class="fontclass">#icon-biaoqing1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-2zhuanhuan"></use>
                    </svg>
                    <div class="name">报表</div>
                    <div class="fontclass">#icon-2zhuanhuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sanjiao1"></use>
                    </svg>
                    <div class="name">三角</div>
                    <div class="fontclass">#icon-sanjiao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-riqi"></use>
                    </svg>
                    <div class="name">日期</div>
                    <div class="fontclass">#icon-riqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yeji"></use>
                    </svg>
                    <div class="name">业绩</div>
                    <div class="fontclass">#icon-yeji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-juxingxuanzhong"></use>
                    </svg>
                    <div class="name">矩形选中</div>
                    <div class="fontclass">#icon-juxingxuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenjianjia"></use>
                    </svg>
                    <div class="name">文件夹</div>
                    <div class="fontclass">#icon-wenjianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhukelaiyuan"></use>
                    </svg>
                    <div class="name">住客来源</div>
                    <div class="fontclass">#icon-zhukelaiyuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jieshouderenwu"></use>
                    </svg>
                    <div class="name">接收的任务</div>
                    <div class="fontclass">#icon-jieshouderenwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongzuotai"></use>
                    </svg>
                    <div class="name">工作台</div>
                    <div class="fontclass">#icon-gongzuotai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baobiao-copy"></use>
                    </svg>
                    <div class="name">报表</div>
                    <div class="fontclass">#icon-baobiao-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-denglurizhi"></use>
                    </svg>
                    <div class="name">登录日志</div>
                    <div class="fontclass">#icon-denglurizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuxiao"></use>
                    </svg>
                    <div class="name">注销</div>
                    <div class="fontclass">#icon-zhuxiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yuangongguanli"></use>
                    </svg>
                    <div class="name">员工管理</div>
                    <div class="fontclass">#icon-yuangongguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-operating"></use>
                    </svg>
                    <div class="name">操作</div>
                    <div class="fontclass">#icon-operating</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhongyaotishi"></use>
                    </svg>
                    <div class="name">重要提示</div>
                    <div class="fontclass">#icon-zhongyaotishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huishou"></use>
                    </svg>
                    <div class="name">回收</div>
                    <div class="fontclass">#icon-huishou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dashuju"></use>
                    </svg>
                    <div class="name">大数据</div>
                    <div class="fontclass">#icon-dashuju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuju"></use>
                    </svg>
                    <div class="name">数据库</div>
                    <div class="fontclass">#icon-shuju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-buju"></use>
                    </svg>
                    <div class="name">布局</div>
                    <div class="fontclass">#icon-buju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongzuozongjie"></use>
                    </svg>
                    <div class="name">工作总结</div>
                    <div class="fontclass">#icon-gongzuozongjie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-erweima1688"></use>
                    </svg>
                    <div class="name">二维码</div>
                    <div class="fontclass">#icon-erweima1688</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mokuai"></use>
                    </svg>
                    <div class="name">模块</div>
                    <div class="fontclass">#icon-mokuai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quanxian"></use>
                    </svg>
                    <div class="name">权限</div>
                    <div class="fontclass">#icon-quanxian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhushou"></use>
                    </svg>
                    <div class="name">助手</div>
                    <div class="fontclass">#icon-zhushou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinrongleiicontubiao-"></use>
                    </svg>
                    <div class="name">金融类icon 图标-35</div>
                    <div class="fontclass">#icon-jinrongleiicontubiao-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinrongleiicontubiao-1"></use>
                    </svg>
                    <div class="name">金融类icon 图标-11</div>
                    <div class="fontclass">#icon-jinrongleiicontubiao-1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinrongleiicontubiao-2"></use>
                    </svg>
                    <div class="name">金融类icon 图标-12</div>
                    <div class="fontclass">#icon-jinrongleiicontubiao-2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinrongleiicontubiao-3"></use>
                    </svg>
                    <div class="name">金融类icon 图标-14</div>
                    <div class="fontclass">#icon-jinrongleiicontubiao-3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinrongleiicontubiao-4"></use>
                    </svg>
                    <div class="name">金融类icon 图标-16</div>
                    <div class="fontclass">#icon-jinrongleiicontubiao-4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinrongleiicontubiao-5"></use>
                    </svg>
                    <div class="name">金融类icon 图标-22</div>
                    <div class="fontclass">#icon-jinrongleiicontubiao-5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinrongleiicontubiao-6"></use>
                    </svg>
                    <div class="name">金融类icon 图标-24</div>
                    <div class="fontclass">#icon-jinrongleiicontubiao-6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinrongleiicontubiao-7"></use>
                    </svg>
                    <div class="name">金融类icon 图标-30</div>
                    <div class="fontclass">#icon-jinrongleiicontubiao-7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinrongleiicontubiao-8"></use>
                    </svg>
                    <div class="name">金融类icon 图标-32</div>
                    <div class="fontclass">#icon-jinrongleiicontubiao-8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinrongleiicontubiao-9"></use>
                    </svg>
                    <div class="name">金融类icon 图标-31</div>
                    <div class="fontclass">#icon-jinrongleiicontubiao-9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinrongleiicontubiao-10"></use>
                    </svg>
                    <div class="name">金融类icon 图标-33</div>
                    <div class="fontclass">#icon-jinrongleiicontubiao-10</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-loading1"></use>
                    </svg>
                    <div class="name">loading</div>
                    <div class="fontclass">#icon-loading1</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
